<template>
	<view class="container">
		<view class="header">
			<image class="header-background" src="../../static/img/1.png"></image>
			<image class="header-logo" src="../../static/img2/favicon.png"></image>
			<text>山东高合信息技术有限公司</text>
			<view class="description">
				近日，山东高合信息技术有限公司升级改造完成，开启了崭新的发展篇章。
				山东高合信息技术有限公司是一家面向大数据、云计算、人工智能领域提供专业产品及服务的创新型企业。专注于大数据、云计算、人工智能技术和产品开发的科技公司，主要为银行、保险、证券、汽车、制造等行业提供优质的数据解决方案及技术服务。
				<br>山东高合2023年人才培养计划已开放报名通道，技术能力提升，全栈开发能力培养，企业级开发实战项目训练，微服务、分布式技术升级，考研专业课培训，你想要的，你需要的，这里都有。
			</view>
			
		</view>
		<view class="info">
			<view class="info-content">
				<text style="float: left;font-size: 2vh;font-weight: 700;height: 2vh;margin: 1vh 0;">联系我们</text>
			</view>
			<view class="info-content">
				<text style="float: left;font-size: 12px;">地址:{{bussinessInfo.address}}</text>
				<image src="../../static/img/map.png" style="float: right;height: 2vh;width: 2vh;"></image>
			</view>
			<view class="info-content">
				<text style="float: left;overflow: hidden;font-size: 12px;">电话:{{bussinessInfo.phone}}</text>
				<image src="../../static/img/telephone.png" style="float: right;overflow: hidden;height: 2vh;width: 2vh;"></image>
			</view>
			<view class="info-content" @click="open">
				<text>微信客服:{{bussinessInfo.wx}}</text>
				<image   src="../../static/img/wx.png" style="float: right;overflow: hidden;height: 2vh;width: 2vh;"></image>
			</view>
			<uni-popup ref="wx" type="message">
				<view class="wx-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
					<text>
						珈云健身中心
					</text>
					<image src="/static/img/wxerweima.jpg"></image>
					<view>
						微信扫码联系客服
					</view>
				</view>
					
			</uni-popup>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bussinessInfo:{
					address:"山东省济南市长清区数娱广场b座",
					phone:"13333333333",
					wx:"山东高合"
				},
			}
		},
		methods: {
			open(){
				console.log(666);
				this.$refs.wx.open("center")
			}
		}
	}
</script>

<style>
	.container{
		width: 100%;
	 display: flex;
	 justify-content: center;
	}
	.header{
		width: 100%;
		position: relative;
		z-index: 1;
		display: flex;
		justify-content: center;
	
	}
	.header .header-background{
		width: 100%;
		height: 30vh;
		position: absolute;
		z-index: 2;
	}
	.header .header-logo{
		width: 14%;
		height: 7vh;
		position: absolute;
		z-index: 3;
		border-radius: 100%;
		/* top: 13vh;
		left: 21vh; */
		border: 2px solid white;
		top: 10vh;
	}
	.header text{
		position: absolute;
		z-index: 3;
		color: white;
		top: 20vh;
	}
	.description{
		position: absolute;
		z-index: 2;
		justify-content: center;
		background-color: white;
		box-sizing: border-box;
		width: 90%;
		padding: 2vh;
		top: 27vh;
		border-radius: 2vh;
		color: #666666;
		
	}
	.info{
		background-color: white;
		/* border: 1px solid red; */
		position: absolute;
		border-radius: 20px;
		width: 90%;
		margin: auto;
		margin-top: 00px;
		top: 60vh;
		height: 19vh;
	}
	.info-content{
		margin: 2vh;
		line-height: 2vh;
		height: 2vh;
	}
	.info-content text{
		float: left;
		overflow: hidden;
		font-size: 12px;
	}
	.info-content image{
		position: relative;
		top: 0vh;
	}
	.wx-content{
		background-color: white;
		margin: auto;
		text-align: center;
	}
</style>
